<template>
  <div class="studentBaseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生基本信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="6">
        <el-input v-model="studentInfoSearchForm.studentId" placeholder="请输入学生学号"></el-input>
      </el-col>
      <el-col :span="6">
        <el-input v-model="studentInfoSearchForm.studentName" placeholder="请输入学生名称"></el-input>
      </el-col>
      <el-col :span="6" class="overflow-clear">
        <el-button type="primary" @click="searchStudentInfo" class="float-left">立即搜索</el-button>
      </el-col>
    </el-row>
    <hr>
    <div class="clearfix mb-5">
      <el-button-group class="float-right">
        <el-button type="primary" @click="toStudentPersonInfo">新增学生</el-button>
        <el-button type="primary" @click="upload">导入数据</el-button>
        <el-button type="primary" @click.native.prevent="downloadFile">导出数据</el-button>
        <el-button type="primary" @click.native.prevent="printInfo">打印</el-button>
      </el-button-group>
    </div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-tree
          accordion
          :data="tree"
          :props="defaultProps"
          @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
          :data="studentTable"
          border
          style="width: 100%">
          <el-table-column
            prop="studentId"
            label="学号"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="studentName"
            label="姓名"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="studentSex"
            label="性别"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="className"
            label="班级"
            min-width="130">
          </el-table-column>
          <el-table-column
            prop="studentJob"
            label="职务"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式"
            min-width="130">
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120">
            <template scope="scope">
              <el-button icon="edit" type="text" @click="updateStudentPersonInfo(scope.row.studentId)"></el-button>
              <el-button icon="delete" type="text"
                         @click="deleteRow(scope.$index, studentTable,scope.row.studentId)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'studentBaseInfo',
    data(){
      return {
        //pagination
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 40,
        studentInfoSearchForm: {
          studentId: '',
          studentName: '',
          id: '',
          upId: '',
          majorID: '',
          enrollmentTime2: '',
          collegeID: '',
          classID: ''
        },
        studentTable: [],
        tree: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      }
    },
    components: {},
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        this.getTree();
        this.getStudentInfo();
      },
      getTree: function () {
        this.$http.get(this.$until.url + '/baseInfoCommon/getAllTree').then(response => {
          this.tree = response.body.xyList
        }, response => {
          console.log('文件获取失败');
        });
      },
      searchStudentInfo() {
        this.studentInfoSearchForm.id = '';
        this.studentInfoSearchForm.upId = '';
        this.studentInfoSearchForm.majorID = '',
        this.studentInfoSearchForm.enrollmentTime2 = '',
        this.studentInfoSearchForm.collegeID = '',
        this.studentInfoSearchForm.classID = ''
        this.getStudentInfo();
      },
      handleNodeClick(data) {
        //console.log(data);
        for (var key in this.studentInfoSearchForm) {
          this.studentInfoSearchForm[key] = "";
        }
        for (var value of this.tree) {
          //console.log(value)
          if (value.id == data.id) {
            this.studentInfoSearchForm.id = data.id
            this.studentInfoSearchForm.collegeID = data.id
            this.getStudentInfo();
            //console.log(1)
            return
          }
          for (var item of value.children) {
            if (item.id == data.id) {
              this.studentInfoSearchForm.upId = value.id
              this.studentInfoSearchForm.id = data.id
              this.studentInfoSearchForm.collegeID = value.id
              this.studentInfoSearchForm.majorID = data.id
              this.getStudentInfo();
              //console.log(2)
              return
            }
            for (var msg of item.children) {
              if (msg.id == data.id) {
                this.studentInfoSearchForm.upId = item.id
                this.studentInfoSearchForm.id = data.id
                this.studentInfoSearchForm.majorID = item.id
                this.studentInfoSearchForm.enrollmentTime2 = data.id
                this.getStudentInfo();
                //console.log(3)
                return
              }
              if (msg.children) {
                for (var ele of msg.children) {
                  if (ele.id == data.id) {
                    this.studentInfoSearchForm.upId = msg.id
                    this.studentInfoSearchForm.id = data.id
                    this.studentInfoSearchForm.enrollmentTime2 = msg.id
                    this.studentInfoSearchForm.classID = data.id
                    this.getStudentInfo();
                    //console.log(4)
                    return
                  }
                }
              }
            }
          }
        }
      },
      getStudentInfo() {
        this.$http.post(this.$until.url + '/studentBaseInfo/getStudent', this.studentInfoSearchForm,
          {
            params: {
              page: this.currentPage,
              pageSize: this.pageSize
            },
            emulateJSON: true
          }).then(response => {
          this.total = response.body.countNum;
          this.studentTable = response.body.stuList
        }, response => {
          console.log('文件获取失败');
        });
      },
      deleteRow: function (index, rows, studentId) {
        this.$confirm('此操作将永久删除该学生信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteStudentInfo(studentId);
          rows.splice(index, 1);
          this.total = this.total - 1;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteStudentInfo(studentId){
        this.$http.get(this.$until.url + '/studentBaseInfo/deleteStudent',
          {
            params: {
              studentId: studentId
            },
          }
        ).then(response => {
          this.getStudentInfo();
          this.$message({
            message: response.body.message,
            type: 'success'
          });
        }, response => {
          this.$message.error('删除失败');
        });
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getStudentInfo();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getStudentInfo();
      },
      toStudentPersonInfo(){
        this.$router.push({path: 'StudentPersonInfo'})
      },
      updateStudentPersonInfo(studentId){
        this.$router.push({name: 'StudentPersonInfoFix', params: {studentId: studentId}})
      },
      upload(){
        var fd = new FormData(), input;
        input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('name', 'file');
        document.body.appendChild(input);
        input.style.display = 'none';
        input.click();
        input.onchange = () => {
          fd.append('file', input.files[0]);
          this.uploadFile(fd)
        }
      },
      uploadFile(fd){
        this.$http.post(this.$until.url + '/studentBaseInfo/importStudent', fd).then((res) => {
          this.getStudentInfo();
          this.$message({
            message: '文件上传成功',
            type: 'success'
          });
        }, (err) => {
          this.$message.error('文件上传失败');
        });
      },
      downloadFile(){
        this.$http.get(`${this.$until.url}/studentBaseInfo/exportStudent`, {
          params: this.studentInfoSearchForm
        }).then((res) => {
          var url = res.body.message
          try {
            var elemIF = document.createElement("iframe");
            elemIF.src = url;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
          }
        }, (err) => {

        })
      },
      printInfo(){
        var msg = '';
        for (var key in this.studentInfoSearchForm) {
          if (this.studentInfoSearchForm[key] == '') {
            continue;
          }
          msg += `&${key}=${this.studentInfoSearchForm[key]}`
        }
        //console.log(msg)
        window.open(`${this.$until.url}/ReportServer?reportlet=printStudent.cpt${msg}`)
      }
    }
  }
</script>
